@use "../../../common.scss";

.command_palette_action {
    display: flex;
    flex-flow: row;
    width: 100%;
    padding: 0.5em 1em;
    cursor: pointer;
    background: transparent;
    border: none;
    height: 3em;

    &:focus,
    &:active {
        outline: none;
    }

    &.selected {
        @include common.roundCorners;
        background: rgba(common.$blue, 0.8);
    }

    kbd {
        @include common.roundCorners;
        font-size: 12px;
        background: common.$bgdefault;
        padding: 0.3em 0.5em;
        border: 1px solid rgba(common.$bgdark, 0.4);
        box-shadow: 0 1px 0 1px rgba(common.$bgdark, 0.07);
    }

    .action_left {
        display: flex;
        flex-flow: row;
        flex: 1 1 auto;
        align-items: center;
        height: 100%;

        i {
            margin-right: 1em;
        }

        .action_name {
            display: flex;
            flex-flow: column;
        }
    }

    .action_right {
        display: flex;
        flex-flow: row;
        align-items: center;
        height: 100%;
    }
}
